<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dojo, javascript, integration, create, tab, generation, fubar_perl" />
<meta name="description" content="Tab generation function using a simple javascript program and Dojo integration!" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="distribution" content="Global" />
<meta name="author" content="Dwight Vietzke" />
<meta http-equiv="Reply-to" content="dwight_vietzke@yahoo.com" />
<meta name="classification" content="mobile internet website software" />
<meta name="copyright" content="Copyright©2008-2009 - OpenSiteMobile" />

	<title>Simple Tab</title>

<script type="text/javascript" charset='utf-8' src="./msos/dojo_config.js"></script>
<script type="text/javascript" charset='utf-8' src="./dojo/dojo.js"></script>

<script type='text/javascript'>
/* <![CDATA[ */

dojo.require("msos.common");
dojo.require("msos.tab");

function init_tabs() {

	// Test browser basics
	if (!msos.common.browser_current())  return false;

	// Generate our tabs
	var tab_obj = new msos.tab.tool(dojo.byId('tabs_div'));
	tab_obj.act_tab_style = 'tab_active';
	tab_obj.pas_tab_style = 'tab_passive';
	tab_obj.com_tab_style = 'tab_common';
	tab_obj.tab_cookie_name = 'simple_tab';
        tab_obj.tab_height_px = 200;

	var demo_tab = {
		caption :	'Demo',
		tab_title :	'Simple Tab Demo',
		container :	dojo.byId('tab_content_0'),
	}
	var about_tab = {
		caption :	'About',
		tab_title :	'About our xHTML Editor',
		container :	dojo.byId('tab_content_1'),
	}
	var help_tab = {
		caption :	'Help',
		tab_title :	'Help using editor functions',
		container :	dojo.byId('tab_content_2'),
	}
	var licn_tab = {
		caption :	'License',
		tab_title :	'xHTML Editor usage license',
		container :	dojo.byId('tab_content_3'),
	}
	tab_obj.add_tab(demo_tab);
	tab_obj.add_tab(about_tab);
	tab_obj.add_tab(help_tab);
	tab_obj.add_tab(licn_tab);

        // Get the tab index if saved to cookie
        tab_obj.get_tab_by_cookie();

        // Generate our tabs
        tab_obj.generate_tabs();

	// This section is useful for testing and demo purposes.
	var config_ul = dojo.byId('configuration');
	config_ul.innerHTML = '';	// Clear na ref (for valid xhtml)
	for (var parm in djConfig) {
	    if (typeof(djConfig[parm]) == 'boolean') {
		var list_elm   = document.createElement("li");
		var inpt_elm_t = document.createElement("input");
		var inpt_elm_f = document.createElement("input");
		inpt_elm_t.type = "radio";
		inpt_elm_f.type = "radio";
		inpt_elm_t.name = parm;
		inpt_elm_f.name = parm;
		inpt_elm_t.value = 'true';
		inpt_elm_f.value = 'false';
		if (djConfig[parm])	inpt_elm_t.checked = true;
		else			inpt_elm_f.checked = true;
		var true_txt = document.createTextNode('T ');
		var list_txt = document.createTextNode('F ' + parm); 
		list_elm.appendChild(inpt_elm_t);
		list_elm.appendChild(true_txt);
		list_elm.appendChild(inpt_elm_f);
		list_elm.appendChild(list_txt);
		config_ul.appendChild(list_elm);
	    }
	}

        return true;
}

// Start our tabs display
dojo.addOnLoad(init_tabs);

/* ]]> */
</script>

<link rel='stylesheet' type='text/css' charset='utf-8' href="./msos/style/fubar.css" media='screen, handheld' />
<link rel='shortcut icon' href='./msos/images/osm.ico' />

<style type="text/css">
/* <![CDATA[ */

ul#language option {
    width:20px;
    text-align:center;
}

/* ]]> */
</style>

</head>

<body>

<div id='body'>

<div class='marquee'>
    <img id='osm_logo_small' src='./msos/images/osm_logo_sml.jpg' class='marquee_img' alt="OpenSiteMobile" />
</div>

<div class='header'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<h1>Tabs w/ Cookie Tracking</h1>

<div id="tabs_div" class='contrast1'></div>

  <div id="tab_content_0" class="tab_content">
        <div class='tab_inner_content'>
	<h2>Simple Tab Tool</h2>

	<p>This page is used to test and demo our simple tab generation tool. It incorporates cookie tracking of last tab
	   viewed, but otherwise is very basic. Our typical use is for 'popup' windows where size is a priority (ie: small
	   screen devices). This tab demo is xHTML Mobile Profile compliant and doesn't require the loading of Dojo 'dijit'
           modules.
        </p>

	<p>The following tabs are borrowed from our xHTML Editor for demo purposes only and are not maintained!</p>
        </div>
  </div>

  <div id="tab_content_1" class="tab_content">
        <div class='tab_inner_content'>
	<h2>About xHTML Editor</h2>
  
	<p>xHTML Editor is a simple WYSIWYG Javascript xHTML editor replacement for <code>&lt;textarea&gt;</code> fields.</p>
	<p>MobileSiteOS incorporates xHTML Editor as a simple interface tool for adding/editing user supplied content in HTML form.</p>
	<p>xHTML Editor is designed to work with IE 6.0+, FireFox 1.5+, Netscape 8.0+, Mozilla 1.7+ and Opera 9.10+.</p>
	<p>Please remember to keep your HTML simple and width insensitive since our website's content target audience
	   will include small screen devices</p>
        </div>
  </div>

  <div id="tab_content_2" class="tab_content">
        <div class='tab_inner_content'>
	<h2>Help for xHTML Editor</h2>
	
	<h3>Definitions:</h3>
	<p>Click -> Pick an html target element from editor window. Picked element (and ancestors) named in 'path:' bar.</p>
	<p>Select -> Make a selection of text/html for manipulation. Selection can only contain simple text or fully nested html elements.</p>
	<p>Parent -> In xHTML Editor, parent usually refers to the nearest HTML 'block element' containing the selected text/html or current cursor position.</p>
	<p><span class='alert'>Note:</span> This help page refers to the general response of xHTML Editor to editing functions. Each browser brand/version may respond differently.</p> 

	<h2>Help Topics</h2>

        <div class='list_small'>
        <h3>Primary Functions:</h3>
	<ul id='primary'>
	<li><a href="#h3_1">Set HTML Tag</a></li>
	<li><a href="#h3_2">Set CSS Class</a></li>
	<li><a href="#h3_3">About Editor</a></li>
	<li><a href="#h3_4">More Options</a></li>
	<li><a href="#h3_5">Bold, Italic, Underline</a></li>
	<li><a href="#h3_6">Text Alignment</a></li>
	<li><a href="#h3_7">Font Color</a></li>
	<li><a href="#h3_8">Background Color</a></li>
	<li><a href="#h3_9">Toggle View</a></li>
	</ul>
        <h3>Context Menu Functions:</h3>
	<ul id='context'>
	<li><a href="#h3_a">Undo, Redo, Save Undo</a></li>
	<li><a href="#h3_b">Cut, Copy, Paste</a></li>
	<li><a href="#h3_c">Ordered, Unordered List</a></li>
	<li><a href="#h3_d">Indent, Outdent</a></li>
	<li><a href="#h3_e">utf-8 Keyboard</a></li>
	<li><a href="#h3_f">Text Direction</a></li>
	<li><a href="#h3_g">Insert Image, Link, Table</a></li>
	<li><a href="#h3_h">Table, Row, Column Prop's</a></li>
	<li><a href="#h3_i">Remove Node</a></li>
	</ul>
        </div>

	<h2>Primary Functions</h2>

	<h3 id='h3_1'>Setting HTML Tags - <a href="#primary" title='Back to top'>top</a></h3><p>
	Click a target element and then select an html tag from the 'Select Tag' drop-down menu to change it. An option to 'insert p'
	is also available to insert a &lt;p&gt; after the nearest block element to the target.<br />
	For selected text/html, selecting an html tag from the 'Select Tag' drop-down menu will surround the selection
	with that node tag.</p>

	<h3 id='h3_2'>Setting a CSS Class - <a href="#primary" title='Back to top'>top</a></h3><p>
	Click a target element and then select a css class from the 'Select CSS' drop-down menu to change it.<br />
	Select some text/html and then select a css class from the 'Select CSS' drop-down menu to surround it with
	a span tag of that class. Selecting a whole text node of a 'block element' will change the class of that block element,
	similar to clicking it.</p>

	<h3 id='h3_3'>About this Editor - <a href="#primary" title='Back to top'>top</a></h3><p>
	Toolbar button leading to our 'About' page plus our help page (this page) and user license.</p>

	<h3 id='h3_4'>More Editor Options - <a href="#primary" title='Back to top'>top</a></h3><p>
	Toolbar button leading to a context sensitive menu of available function options for the targeted
	element/selected text/related ancestors.</p>

	<h3 id='h3_5'>Bold, Italic, Underline - <a href="#primary" title='Back to top'>top</a></h3><p>
	Click a target element and then press Bold (B), Italic (I) or Underline (U) to change the style of 'typed' or 'pasted' inserted text.<br />
	Select some text/html and then press Bold (B), Italic (I) or Underline (U) to surround it with
	a span tag adding that style.</p>

	<h3 id='h3_6'>Text Alignment: Justify Left, Center, Right or Full</h3><p>
	Click a target element and then press Left, Center, Right or Full to justify the text within that element.<br />
	For selected text/html, the parent element will be set as the target (same as click) and all text within the 
	parent node will be justified.</p>

	<h3 id='h3_7'>Font Color - <a href="#primary" title='Back to top'>top</a></h3><p>
	Click anywhere on editor window, then push 'Font Color' button to get a table of html elements to apply doc. wide css font colors to.<br />
	For selected text/html, pushing 'Font Color' will surround the selected text with a span tag of that font color.</p>

	<h3 id='h3_8'>Background Color - <a href="#primary" title='Back to top'>top</a></h3><p>
	Click anywhere on editor window, then push 'Background Color' button to get a table of html elements to apply doc. wide css background colors to.<br />
	For selected text/html, pushing 'Background Color' will surround the selected text/html with a span tag of that background color.</p>

	<h3 id='h3_9'>Toggle View - <a href="#primary" title='Back to top'>top</a></h3><p>
	Toolbar button which toggles thru the available editor views, 'wysiwyg -> html -> style' in that order.</p>

	<h2>Context Menu Functions</h2>

	<h3 id='h3_a'>Undo, Redo, Save Undo - <a href="#context" title='Back to top'>top</a></h3><p>
	Undo allows you to move back one javascript stored copy of the current doc. Redo allows you to
	move forward one copy (assuming you have used undo at least once).<br />
	Save Undo allows you to store intermediate steps. Many functions save an undo copy automatically when completed.
	They typically end with the editor screen out of focus. Others end with changes to the editor, but the
	cursor still active and ready for input. This allows the chaining of editor actions, but
	requires 'Save Undo' to manually save a copy of those changes.</p>

	<h3 id='h3_b'>Cut, Copy, Paste - <a href="#context" title='Back to top'>top</a></h3><p>
	Click a target element and then select a css class from the 'Select CSS' drop-down menu to change it.<br />
	Select some text/html and then select a css class from the 'Select CSS' drop-down menu to surround it with
	a span tag of that class. Selecting a whole text node of a 'block element' will change the class of that block element,
	similar to clicking it.</p>

	<h3 id='h3_c'>Ordered, Unordered List - <a href="#context" title='Back to top'>top</a></h3><p>
	Toolbar button leading to our 'About' page plus our help page (this page) and user license.</p>

	<h3 id='h3_d'>Indent, Outdent - <a href="#context" title='Back to top'>top</a></h3><p>
	Toolbar button leading to a context sensitive menu of available function options for the targeted
	element/selected text/related ancestors.</p>

	<h3 id='h3_e'>utf-8 Keyboard - <a href="#context" title='Back to top'>top</a></h3><p>
	Click a target element and then press Bold (B), Italic (I) or Underline (U) to change the style of 'typed' or 'pasted' inserted text.<br />
	Select some text/html and then press Bold (B), Italic (I) or Underline (U) to surround it with
	a span tag adding that style.</p>

	<h3 id='h3_f'>Text Direction - <a href="#context" title='Back to top'>top</a></h3><p>
	Click a target element and then press Left, Center, Right or Full to justify the text within that element.<br />
	For selected text/html, the parent element will be set as the target (same as click) and all text within the 
	parent node will be justified.</p>

	<h3 id='h3_g'>Insert Image, Link, Table - <a href="#context" title='Back to top'>top</a></h3><p>
	Click anywhere on editor window, then push 'Font Color' button to get a table of html elements to apply doc. wide css font colors to.<br />
	For selected text/html, pushing 'Font Color' will surround the selected text with a span tag of that font color.</p>

	<h3 id='h3_h'>Table, Row, Col. Prop's - <a href="#context" title='Back to top'>top</a></h3><p>
	Click anywhere on editor window, then push 'Background Color' button to get a table of html elements to apply doc. wide css background colors to.<br />
	For selected text/html, pushing 'Background Color' will surround the selected text/html with a span tag of that background color.</p>

	<h3 id='h3_i'>Remove Node - <a href="#context" title='Back to top'>top</a></h3><p>
	Menu button 'Remove +inner' removes the clicked node and all inner html/text.<br />'Remove only' removes just the
	html node, leaving any inner html/text as part of the target parent.</p>
        </div>
  </div>

  <div id="tab_content_3" class="tab_content">
        <div class='tab_inner_content'>
	<h2>License for xHTML Editor</h2>

	<hr />

	<h3>License xHTML Editor (Standard)<br />for 1 year - $1.00 USD</h3>   
	<h3>License xHTML Editor (Non-Branded)<br />without OpenSiteMobile<br />Visible Ref's - $150.00 USD</h3>
	<h3>License xHTML Editor (Branded)<br />with Licensee Branded<br />Visible Ref's - $300.00 USD</h3>

	<hr />
	<h3>xHTML Editor License Agreement</h3>
	<hr />

	<h3>I. Introduction</h3>

	<p>This is a legal agreement between the software licensee (You)
	and the copyright owner of this website software, Dwight D. Vietzke
	Jr. (the Owner), and specifies the terms and conditions under which
	you will use OpenSiteMobile's "xHTML Editor" (the Software). The
	Software is licensed, not sold to you, by the Owner for use only
	under the terms and conditions of this license agreement. The
	Software is protected by all applicable United States Copyright
	Laws and International Treaty Provisions.</p>

	<h3>II. Copyright Information</h3>

	<h3>Copyright©2008 All Rights Reserved.</h3>

	<table>
	<tr><th colspan='2'>xHTML Editor</th>
	</tr>
	<tr>
		<td class='status_l'><span class='bold_text'>Owner</span></td>
		<td class='status_r'>Dwight D. Vietzke Jr.</td>
	</tr>
	<tr>
		<td class='status_l'><span class='bold_text'>Addr.</span></td>
		<td class='status_r'>
			OpenSiteMobile<br />
			1880 Colony Drive<br />
			Suite 11-R<br />
			Surfside Beach, SC<br />29575</td>
	</tr>
	<tr>
		<td class='status_l'><span class='bold_text'>E-mail</span></td>
		<td class='status_r'>
			<a href='mailto:dwight_vietzke@yahoo.com' title='dwight_vietzke@yahoo.com'>
			dwight_vietzke@yahoo.com</a></td>
	</tr>
	<tr>
        <td class='status_l'><span class='bold_text'>WWW</span></td>
        <td class='status_r'>
			<a href='http://www.opensitemoble.com'
			title='OpenSiteMobile - Open Source Software for the Mobile Web'>
			<span class='bold_text'>opensitemoble.com</span></a></td>
	</tr>
	</table>

	<h3>III. Granting of License</h3>

	<p>The Owner grants to You, and You accept, subject to all terms 
	and conditions set forth in this License Agreement, a nonexclusive
	and nontransferable license to use a copy of the Software on or for
	one internet domain, and to make backup copies only for replacing
	the previously installed copy of the Software for that domain.</p>

	<p>A license is granted to You for use of the Software on one personal
	or company registered website. This is qualified by the website
	domain name having been registered by You or the company as the
	administrative contact via InterNIC Registration Services,
	<a href="http://rs.internic.net/index.html">
	http://rs.internic.net</a></p>

	<p>Individual software licenses are required for each additional
	website domain name which the Software will operate under. The
	Owner grants you the right to use the Software under only one
	domain name per license, regardless of whether the physical
	website or websites use mutilple copies of the Software or not.</p>

	<p>"Standard License" - The Owner grants You the right to modify or
	rewrite the Software for one registered internet domain name provided
	that all OpenSiteMobile visible references remain as they were
	when the Software was delivered to you, and all copyright
	information remains intact in all working documents, scripts,
	templates, files and pages that make up the copyrighted work known
	as "the Software". "Visible" refers to the text or graphical
	information that is output by the Software and is viewable by users
	of the internet domain on which the Software is installed. The
        OpenSiteMobile visible references are the name, title, copyright and url
	information at the bottom of each HTML website template page include
	in the Software. All viewable output from a website operating under
	the terms and conditions of the Standard license must contain this
	OpenSiteMobile reference information somewhere on each output page,
	and of equal visibility to that of the delivered Software.</p>

	<p>"Non-Branded License" - The Owner grants You the right to modify or
	rewrite the Software for one registered internet domain name plus
	grants You the right to remove the OpenSiteMobile visible
	references and visible copyright information code from the
	Software's HTML website template pages. The Owner still requires
	that You retain all copyright information intact in all working
	documents, scripts, templates, files and pages that make up the
	copyrighted work known as "the Software".</p>

	<p>"Branded License" - The Owner grants You the right to modify or
	rewrite the Software for one registered internet domain name plus
	grants You the right to change the OpenSiteMobile visible references
	and visible copyright information code in the Software's HTML
	website template pages to reflect whatever website "branding" You
	want to provide. The Owner still requires that You retain all
	copyright information intact in all working documents, scripts,
	templates, files and pages that make up the copyrighted work known
	as "the Software".</p>

	<p>If any terms or conditions in this License Agreement are violated
	or no longer agreed to, the license is revoked immediately and this
	agreement is terminated as specified in section "VII. Termination of
	License Agreement", below.</p>

	<p>The only rights granted to You are those expressed in the above
	paragraphs. All rights not expressly granted in this agreement are
	reserved by the Owner, his heirs and successors.</p>

	<h2>IV. Term of License Agreement</h2>

	<p>"Standard license" - The term of this license agreement is
	one (1) consecutive year, beginning from the date payment is
	received and subject to compliance with this agreement.</p>

	<p>"Non-Branded License" - The term of this license agreement is
	in perpetuity, beginning from the date payment is received and
	subject to compliance with this agreement.</p>

	<p>"Branded License" - The term of this license agreement is
	in perpetuity, beginning from the date payment is received and
	subject to compliance with this agreement.</p>

	<p>The Standard license is renewable for $1.00 USD for each additional
	one (1) consecutive year term.</p>

	<p>Violation of any part of the license agreement effectively
	terminates the license and the license term becomes the time the
	Software has been in your possesion and use prior to that
	termination date.</p>

	<h3>V. Copyright and Proprietary Information</h3>

	<p>You have a non-exclusive license to use the Software according to
	the terms presented here. You own the media on which the Software
	exists. You do not, however, have any interest in or ownership of
	the Software itself. All ownership of it, interest in it, and rights
	regarding it remain with the Owner.</p>

	<p>You may not modify or translate the Software or related documentation
	with the intent to add value, lease, loan, or resell for profit,
	without the express written permission of the Owner.</p>

	<p>You may not adapt, rent, lease, loan or resell for profit the
	Software or related documentation without the express
	written permission of the Owner.</p>

	<p>Upon notification from the owner of a termination of your license,
	you must cease to use and/or distribute the Software and destroy
	all copies of the Software and its related documentation in your
	possession. Nothing in this License Agreement shall be construed to
	mean that You have or are granted any rights other than those
	expressly granted with the license as specified in the section
	"III. Granting of License", above.</p>

	<h3>VI. Disclaimer of Warranty</h3>

	<p>The Software is provided "as is" without warranty of any kind,
	either express or implied, including without limitation any warranty
	with respect to its merchantability or its fitness for any
	particular purpose.</p>

	<p>In no event will OpenSiteMobile or the Owner be liable to you for
	any consequential, incidental, or indirect damages (including
	damages for loss of business profits, business interruption, loss
	of business information, and the like) arising out of the use or
	inability to use the Software, even if OpenSiteMobile or the Owner
	has been advised of the possibility of such damages.</p>

	<p>Because some countries do not allow the exclusion of limitation of
	liability for consequential or incidental damages, the above
	limitations may not apply to you.</p>

	<p>In cases where the above exclusion of limitations do not apply by
	law, OpenSiteMobile or the Owner's liability to you for actual
	damages for any cause whatsoever, and regardless of the form of the
	action, will be limited to an amount no greater than the Standard
	License fee of $12.00 USD. This warranty shall be void if the
	Software has been tampered with, modified, improperly used, or used
	on hardware other than that on which it is intended to run.</p>

	<p>You acknowledge that You have read the foregoing disclaimers of
	warranty and limitation of liability and understand that You assume
	the entire risk of use of the Software.</p>

	<h3>VII. Termination of License Agreement</h3>

	<p>This License Agreement shall be terminated immediately if any of the
	following events occur:</p>

	<ol>
	  <li>Any term or condition of this License Agreement is violated.</li>
	  <li>Any term or condition of this License Agreement is no longer
		agreed to.</li>
	  <li>Payment for the Sotware license is not completed.</li>
	</ol>

	<p>Immediately upon becoming aware that this License Agreement is or
	has been terminated, you shall destroy all copies of the Software
	and all backups, relinquish all rights related to the Software,
	and promise not to use, display, or otherwise control or attempt
	to control anything related to the Software.</p>

	<p>You may terminate the license agreement by destroying all copies of
	the Software and its related documentation.</p>

	<h3>VIII. Severability of License Agreement</h3>

	<p>If any provision of this license agreement shall be held to be
	invalid or unenforceable for any reason, the remaining provisions
	shall continue to be valid and enforceable. If a court finds that
	any provision of this license agreement is invalid or unenforceable, 
	but that by limiting such provision it would become valid or
	enforceable, then such provision shall be deemed to be written,
	construed, and enforced as so limited.</p>

	<h3>IX. Waiver of Contractual Right</h3>

	<p>The failure of the the Owner to enforce any provision of this
	license agreement shall not be construed as a waiver or limitation
	of the the Owner's right to subsequently enforce and compel strict
	compliance with every provision of this license agreement.</p>

	<h3>X. Applicable Law</h3>

	<p>This license agreement shall be governed by the laws of the United
	States of America.</p>
        </div>
  </div>

<div class='space'> </div>

<h3>Page Debugging</h3>

<form accept-charset='utf-8' action='simple_tab.html' method='get'>
<div class='list_small'>

<ul id='configuration'><li>Not Available</li></ul>

<input type="submit" value="Reload Page" />

</div>
</form>

<h3>Reference:</h3>

<div class='list_small'>
<ul>
    <li><a href='./msos/common.js'>msos.common</a></li>
    <li><a href='./msos/tab.js'>msos.tab</a></li>
</ul>
</div>

<h3 title='Testing utf-8 encoded characters'>Iñtërnâtiônàlizætiøn</h3>

<div class='footer'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<div id='copyright'>
<span class='no_br'>Powered by:
   <a href='http://www.opensitemobile.com'>
  <span class='bold_text' title="Copyright©2008-2009 OpenSiteMobile - All rights reserved">MobileSiteOS</span></a>™</span>
</div>

</div> <!-- end 'body' div -->

</body>
</html>